<template>
	<el-card class="!border-none mb-4" shadow="never">
		<el-tabs v-model="activeName">
			<el-tab-pane label="首页轮播图" name="homeBanner">
				<el-card class="content mb-4" shadow="never">
					<div class="sub-title">轮播图设置</div>
					<div>
						<el-form-item label-width="0">
							<el-button type="primary" class="w-full" @click="handleAdd('homeBanner')"> 添加图片 </el-button>
						</el-form-item>
					</div>
					<div>
						<draggable class="draggable" v-model="homeData.homeBanner.list" animation="300" draggable=".draggable" :move="onMove">
							<template v-slot:item="{ element, index }">
								<div class="sub-item cursor-pointer" :class="{ draggable: index != 0 }">
									<div class="close-btn" @click="handleDelete(index, 'homeBanner')">
										<SvgIcon name="ele-Close" size="12" />
									</div>
									<div class="bg-fill-light w-full p-4 mt-4">
										<el-form-item label="图片：">
											<imageUpload v-model="element.image_url" promptText="建议尺寸：780*360" :limit="1" />
										</el-form-item>
										<el-form-item label="链接地址：">
											<linkSelect v-model="element.link" :type="2" />
										</el-form-item>
									</div>
								</div>
							</template>
						</draggable>
					</div>
				</el-card>
			</el-tab-pane>
			<el-tab-pane label="推荐轮播图" name="recommendBanner">
				<el-card class="content mb-4" shadow="never">
					<div class="sub-title">轮播图设置</div>
					<div>
						<el-form-item label-width="0">
							<el-button type="primary" class="w-full" @click="handleAdd('recommendBanner')"> 添加图片 </el-button>
						</el-form-item>
					</div>
					<div>
						<draggable class="draggable" v-model="homeData.recommendBanner.list" animation="300" draggable=".draggable" :move="onMove">
							<template v-slot:item="{ element, index }">
								<div class="sub-item cursor-pointer" :class="{ draggable: index != 0 }">
									<div class="close-btn" @click="handleDelete(index, 'recommendBanner')">
										<SvgIcon name="ele-Close" size="12" />
									</div>
									<div class="bg-fill-light w-full p-[15px] mt-4">
										<el-form-item label="图片：">
											<imageUpload v-model="element.image_url" promptText="建议尺寸：640*300" :limit="1" />
										</el-form-item>
										<el-form-item label="链接地址：">
											<linkSelect v-model="element.link" :type="2" />
										</el-form-item>
									</div>
								</div>
							</template>
						</draggable>
					</div>
				</el-card>
			</el-tab-pane>
			<el-tab-pane label="广告图" name="advertImage">
				<el-card class="content mb-4" shadow="never">
					<div class="sub-title">首页广告</div>
					<div class="mb-4">
						<div class="sub-item cursor-pointer">
							<div class="bg-fill-light w-full p-[15px] mt-4">
								<el-form-item label="图片：">
									<imageUpload v-model="homeData.advertImage.home.image_url"  promptText="建议尺寸：780*100" :limit="1" />
								</el-form-item>
								<el-form-item label="链接地址：">
									<linkSelect v-model="homeData.advertImage.home.link" :type="2" />
								</el-form-item>
							</div>
						</div>
					</div>
					<div class="sub-title">推荐广告</div>
					<div>
						<div class="sub-item cursor-pointer">
							<div class="bg-fill-light w-full p-[15px] mt-4">
								<el-form-item label="图片：">
									<imageUpload v-model="homeData.advertImage.recommend.image_url"  promptText="建议尺寸：640*400" :limit="1" />
								</el-form-item>
								<el-form-item label="链接地址：">
									<linkSelect v-model="homeData.advertImage.recommend.link" :type="2" />
								</el-form-item>
							</div>
						</div>
					</div>
				</el-card>
			</el-tab-pane>
		</el-tabs>
		<footerSubmit>
			<el-button v-auth="'decoration/pc/homeSet'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
	</el-card>
</template>
<script lang="ts" setup name="pcHome">
import { ref, reactive, onMounted } from 'vue';
import { diyGetHomePage, diySetHomePage } from '/@/api/diy';
import { messageError,messageSuccess } from '/@/utils/message';
import Draggable from 'vuedraggable';

const activeName = ref('homeBanner');

const homeData = reactive({
	homeBanner: {
		list: [],
	},
	recommendBanner: {
		list: [],
	},
	advertImage: {
		home: {
			image_url: '',
			link: '',
		},
		recommend: {
			image_url: '',
			link: '',
		},
	},
});

const tabbarLimit = reactive({
	max: 8,
	min: 1,
});

const onMove = (e: any) => {
	if (e.relatedContext.index == 0) {
		return false;
	}
	return true;
};

const handleAdd = (type: string) => {
	if (homeData[type].list?.length >= tabbarLimit.max) {
		messageError(`图片最多添加${tabbarLimit.max}个`);
		return;
	}

	homeData[type].list.push({
		name: '',
		image_url: '',
		link: '',
	});
};

const handleDelete = (index: number, type: string) => {
	if (homeData[type].list?.length <= tabbarLimit.min) {
		return messageError(`图片最少保留${tabbarLimit.min}个`);
	}
	homeData[type].list.splice(index, 1);
};

const getData = async () => {
	const data = await diyGetHomePage({ type: 2 });
	const homeBannerData = data.data?.homeBanner;
	if (homeBannerData) {
		for (const key in homeData.homeBanner) {
			if (homeBannerData[key] != null && homeBannerData[key] != undefined) {
				homeData.homeBanner[key] = homeBannerData[key];
			}
		}
	}

	const recommendBannerData = data.data?.recommendBanner;
	if (recommendBannerData) {
		for (const key in homeData.recommendBanner) {
			if (recommendBannerData[key] != null && recommendBannerData[key] != undefined) {
				homeData.recommendBanner[key] = recommendBannerData[key];
			}
		}
	}

	const advertImageData = data.data?.advertImage;
	if (advertImageData) {
		for (const key in homeData.advertImage) {
			if (advertImageData[key] != null && advertImageData[key] != undefined) {
				homeData.advertImage[key] = advertImageData[key];
			}
		}
	}
};

// 保存提交
const handleSubmit = async () => {
	await diySetHomePage({ type: 2, data: homeData });
	getData();
	messageSuccess('设置成功');
};

onMounted(() => {
	getData();
});
</script>

<style scoped lang="scss">
.sub-title {
	align-items: flex-end;
	display: flex;
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 500;
}
.sub-item {
	position: relative;

	&:hover > .icon-close {
		display: flex;
	}

	.close-btn {
		display: none;
		position: absolute;
		top: -6px;
		right: -6px;
		width: 16px;
		height: 16px;
		background-color: #0000004d;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		color: #fff;
		cursor: pointer;
	}

	&:hover {
		.close-btn {
			display: flex;
		}
	}
}
</style>
